<template>
	<y-popup ref="worksPopup" mode="bottom" round='12px' :zIndex="200">
		<view class="px-18 text-black py-30">
			<view class="text-center fs-20 fw-600 ">选择生成方式</view>
			<view class="grid-columns-2 gap-10 mt-20 text-white">
				<view class="works flex-x-center px-12 flex flex-column"
					:style="`background-image:url(${system.domain}/app/ycSora/image/sl.png)`"
					@click="$tool.debounce(select(1))">
					<text class="fs-20 fw-600">消耗算力</text>
					<text class="fs-14">可用算力{{USERINFO?.point}}点</text>
					<text class="fs-14">所需消耗{{getConsume.point}}点</text>
				</view>
				<view class="works flex-x-center px-12 flex flex-column"
					:style="`background-image:url(${system.domain}/app/ycSora/image/shcs.png)`"
					@click="$tool.debounce(emit('onSelected',0))" v-if="USERINFO?.productions>=getConsume.productions">
					<text class="fs-20 fw-600">消耗次数</text>
					<text class="fs-14">可用次数{{USERINFO?.productions}}</text>
					<text class="fs-14">所需消耗{{getConsume.productions}}次</text>
				</view>
				<view class="works flex-x-center px-12 flex flex-column" v-else
					@click="$tool.debounce(emit('onSelected',2))"
					:style="`background-image:url(${system.domain}/app/ycSora/image/sp.png)`">
					<text class="fs-20 fw-600">观看广告</text>
					<text class="fs-14">可用次数{{USERINFO?.productions}}</text>
					<text class="fs-14">所需消耗{{getConsume.productions}}次</text>
				</view>
			</view>
		</view>
		<view @click="worksPopup.close()"
			class=" w-30 h-30 text-grey-1 round-circle flex flex-center absolute right-10 top-18"
			style="background: rgba(116,116,128,0.08);;">
			<text class="iconfont icon-guanbi text-333 fs-14 fw-600"></text>
		</view>
	</y-popup>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { useWebConfigStore, useRefs, useUserStore } from '@/stores'
	import system from '@/utils/system';
	import { $tool } from '@/utils';
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const props = defineProps({
		video_type: {
			default: 10,
			type: [Number, String]
		},
		type: {
			default: 1,
			type: [Number, String]
		}
	})
	const emit = defineEmits(['onSelected'])
	const worksPopup = ref(null)
	const open = () => {
		worksPopup.value.open()
	}
	const close = () => {
		worksPopup.value.close()
	}

	const getConsume = computed(() => {
		let data = {
			point: 0,
			productions: 0
		};
		if (props.video_type == 30) {
			data.point = WEBCONFIG.value?.pro_video_point;
			data.productions = WEBCONFIG.value?.pro_video_productions;
			return data;
		}
		if (props.type == 1) {
			if (props.video_type == 10) {
				data.point = WEBCONFIG.value?.routine_video_point || 0;
				data.productions = WEBCONFIG.value?.routine_video_productions || 0;
			}
			if (props.video_type == 20) {
				data.point = WEBCONFIG.value?.routine_video_point_fast || 0;
				data.productions = WEBCONFIG.value?.routine_video_productions_fast || 0;
			}
		} else if (props.type == 2) {
			data.point = WEBCONFIG.value?.ad_video_point || 0;
			data.productions = WEBCONFIG.value?.ad_video_productions || 0;
		}
		return data;
	});


	const select = (e) => {
		if (USERINFO?.value.point < getConsume.value.point) {
			emit('onSelected', 99)
		} else {
			emit('onSelected', 1)
		}
	}

	defineExpose({ open, close })
</script>

<style>
	.works {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 156rpx;
	}
</style>